<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('.album_ctrl_main').hover(function(){
		jQuery(this).addClass('album_active');
	},function() {
		jQuery(this).removeClass('album_active');
	});
	
	
	jQuery('.album_ctrl_main a').click(function() {
		jQuery('.album_ctrl_content').toggle();
	});
	
	jQuery('.album_ctrl_content a').click(function() {
		textcode = jQuery(this).text();
		jQuery('.album_ctrl_main a').text(textcode);
		jQuery('.album_ctrl_content').toggle();
	});
});
	
</script>
<style type="text/css">
#album_ctrl {
	position: relative;
	z-index: 10;
	margin: 7px 0px 0px 0px;
}
.album_ctrl_main {
	width:228px;
	height:35px;
	background:transparent url(<?php echo HOSTNAME.'/img/glyphs.png';?>) no-repeat 0px -61px;
	margin: 0px 0px 0px 20px;
}
.album_ctrl_main a {
	display: block;
	line-height: 34px;
	padding: 0px 0px 0px 10px;
}

.album_active {
	background:transparent url(<?php echo HOSTNAME.'/img/glyphs.png';?>) no-repeat 0px -96px;
}

#album_ctrl .active {

}

.album_ctrl_content {
	background: none repeat scroll 0 0 red;
	display: block;
	height: 200px;
	margin: 0 0 0 20px;
	width: 227px;
	display:none;
	border:1px solid #909194;
	background:#fff;
	position:absolute;
	top:0px;
}
.album_ctrl_content ul {
	height: auto;
}
.album_ctrl_content li {
	display:block;
	border-bottom: 1px solid  #e6e9eb;
	height: 30px;
}

.album_ctrl_content li a {
	line-height: 20px;
	padding: 5px 5px 5px 20px;
	display: block;
	
}

.album_ctrl_content li a:hover {
	background: #f9f9f9;
	color: #9E2121;
}

</style>
<div id="album_ctrl">
	<div class="album_ctrl_main">
		<a href="#">Featured</a>
	</div>
	<div class="album_ctrl_content">
		<ul>
			<li><a href="#">Featured</a></li>
			<li><a href="#">Newest</a></li>
			<li><a href="#">Popular</a></li>
			<li><a href="#">Request a dish</a></li>
		</ul>
	</div>
</div>
